<script setup>
import { useRouter } from 'vue-router'
import { gotoPath } from '@renderer/api'
import { ElMessageBox, ElCard, ElRow, ElCol } from 'element-plus'
import { onMounted, onUnmounted, ref } from 'vue'

// router钩子，返回路由器实例
const router = useRouter()
const { ipcRenderer } = window.electron

const time = ref('')

// 登录
const goto = (path) => {
  router.push(path) // 修复了这里传递的参数错误
}

// 读取目录文件列表
const readDir = () => {
  // 给主进程发送消息
  ipcRenderer.send('readDir', { msg: 'test' })
  // 通过preload接收主进程的回调信息
  window.api.readDirReply((event, result) => {
    if (!result.canceled) {
      console.log(result)
    } else {
      console.log('取消选择操作。')
    }
  })
}

// 获取Electron版本号 - 给主进程发送消息并异步等待结果
const getElectronVersion = () => {
  ipcRenderer.invoke('getElectronVersion', { msg: 'sendByRenderer' }).then((result) => {
    ElMessageBox.alert(result, 'Electron版本号', {
      confirmButtonText: 'OK'
    })
  })
}

const getWsPort = () => {
  ipcRenderer.invoke('worker', { msg: '发送控制指令' }).then((result) => {
    ElMessageBox.alert(result, 'port :', {
      confirmButtonText: 'OK'
    })
  })
}

//调用主进程方法退出系统
const exitSystem = () => {
  ipcRenderer.invoke('exitSystem')
}

const openNewWin = () => {
  ipcRenderer.send('window-new', {
    route: '/users',
    width: 900,
    height: 300,
    data: {
      id: 1,
      name: '张三'
    }
  })
}

// let webSocketListener // 保存WebSocket事件监听器的引用
// onMounted(() => {
//   const webSocket = window.api.getWebSocket()
//   webSocketListener = (event, message) => {
//     const parsedMessage = JSON.parse(message)
//     switch (parsedMessage.type) {
//       case 'time':
//         time.value = parsedMessage.data
//         break
//     }
//   }
//   webSocket.on(webSocketListener)
// })
//
// onUnmounted(() => {
//   // 移除WebSocket时间监听
//   const webSocket = window.api.getWebSocket()
//   webSocket.removeListener(webSocketListener)
// })
</script>


<template>
  <div class="P-home">
    <el-card shadow="never" class="time-card">
      <el-row>
        <el-col :span="24">
          <p>当前时间: {{ time }}</p>
        </el-col>
      </el-row>
    </el-card>
    <div class="button-container">
      <el-card shadow="never" class="button-card">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="gotoPath('/monitor')">监控</el-button>
          </el-col>
          <el-col :span="24">
            <el-button type="primary" @click="getWsPort">获取websocket端口</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="gotoPath('/users')">用户列表</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="gotoPath('/wsConfig')">WS服务器配置</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="readDir">读取目录列表</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="openNewWin">弹出窗口</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="getElectronVersion">查看Electron版本</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button @click="goto('/login')">返回登录</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button @click="exitSystem">退出系统</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
.P-home
  position: absolute
  top: 0
  bottom: 0
  width: 100%
  background: linear-gradient(#f48c8d, #f4c58d)
  text-align: center
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column

  h1
    margin-top: 50px
    color: #fff
    font-size: 28px

  .ipt-con
    margin: 20px auto 0
    text-align: center

  .time-card
    position: static
    margin-bottom: 20px

  .button-container
    width: 100%
    max-width: 400px

  .button-card
    .el-button
      display: block
      width: 100%
      margin-bottom: 10px
</style>
